<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言板</title>
		<script type="text/javascript">
			var fun2=function(messages){
				var username=document.getElementById("username");
				var msg=document.getElementById("msg");
				var msgs=document.getElementById("msgs");
				var message="["+username.value+"]说："+msg.value;
				messages.unshift(message);
				if(messages.length>10){
					messages.pop();
				}
				msgs.value=messages.join("\n");
			}
			
			function fun1(){
				var username=document.getElementById("username");
				var msg=document.getElementById("msg");
				var msgs=document.getElementById("msgs");
				username.value="";
				msg.value="";
				msgs.value="";
			}
			
			window.onload = function(){
				var messages=[];
				var resetBtn = document.getElementById("resetBtn");
				var msgBtn = document.getElementById("msgBtn");
				var msgs=document.getElementById("msgs");

				resetBtn.onclick = fun1;
				msgBtn.onclick = function(){fun2(messages)};

				msgs.value = "欢迎来到留言板，请输入您的姓名和留言内容。";
			}
		</script>
		
	</head>
	<body>
		<div>姓名:<input type="text" name="" id="username" value="" /></div><br>
		<div>留言:<textarea rows="3" cols="30" id="msg" style="resize: none;vertical-align: top;" ></textarea></div>
		<br>
		<button id="resetBtn">清空留言</button>
		<button id="msgBtn">提交留言</button>
		<hr>
		<textarea rows="10" cols="30" id="msgs" disabled="disabled" style="resize: none;"></textarea>
	</body>
</html>
